<template>
  <div>
    <el-timeline>
      <el-timeline-item
        color="#55DBCB"
        placement="top"
        style="background-color: #55DBCB10"
        timestamp="日"
      >
        <div class="grid grid-cols-6 items-center gap-4 m-2">
          <el-card
            v-for="(item, index) in panelDataDay"
            :key="index"
            :class="[getStatus(getObjValue(item, 'change_rate'))]"
          >
            <p class=" leading-8">
              <i class="el-icon-hot-water"></i>
              <span class="font-bold">{{ item | getLabel }}</span>
            </p>
            <p class=" leading-8">
              <i class="el-icon-coin"></i>
              今日
              <span class="font-bold">{{
                  getObjValue(item, 'this_serial') | formatNumber
                }}</span>
            </p>
            <p class=" leading-8">
              <i class="el-icon-coin"></i>
              昨日
              <span class="font-bold">{{
                  getObjValue(item, 'last_serial') | formatNumber
                }}</span>
            </p>

            <p class=" leading-8">
              <i class="el-icon-collection-tag"></i>
              较昨日
              <span class="font-bold tip">{{
                  getObjValue(item, 'change_rate') || '---'
                }}</span>
            </p>
          </el-card>
        </div>
      </el-timeline-item>

      <el-timeline-item
        color="#C96993"
        placement="top"
        style="background-color: #C9699310"
        timestamp="周"
      >
        <div class="grid grid-cols-6 items-center gap-4 m-2">
          <el-card
            v-for="(item, index) in panelDataWeek"
            :key="index"
            :class="[getStatus(getObjValue(item, 'change_rate'))]"
          >
            <p class=" leading-8">
              <i class="el-icon-hot-water"></i>
              <span class="font-bold">{{ item | getLabel }}</span>
            </p>
            <p class=" leading-8">
              <i class="el-icon-coin"></i>
              本周
              <span class="font-bold">{{
                  getObjValue(item, 'this_serial') | formatNumber
                }}</span>
            </p>
            <p class=" leading-8">
              <i class="el-icon-coin"></i>
              上周
              <span class="font-bold">{{
                  getObjValue(item, 'last_serial') | formatNumber
                }}</span>
            </p>

            <p class=" leading-8">
              <i class="el-icon-collection-tag"></i>
              较上周
              <span class="font-bold tip">{{
                  getObjValue(item, 'change_rate') || '---'
                }}</span>
            </p>
          </el-card>
        </div>
      </el-timeline-item>

      <el-timeline-item
        color="#453823"
        placement="top"
        style="background-color: #45382310"
        timestamp="月"
      >
        <div class="grid grid-cols-6 items-center gap-4 m-2">
          <el-card
            v-for="(item, index) in panelDataMonth"
            :key="index"
            :class="[getStatus(getObjValue(item, 'change_rate'))]"
          >
            <p class=" leading-8">
              <i class="el-icon-hot-water"></i>
              <span class="font-bold">{{ item | getLabel }}</span>
            </p>
            <p class=" leading-8">
              <i class="el-icon-coin"></i>
              本月
              <span class="font-bold">{{
                  getObjValue(item, 'this_serial') | formatNumber
                }}</span>
            </p>
            <p class=" leading-8">
              <i class="el-icon-coin"></i>
              上月
              <span class="font-bold">{{
                  getObjValue(item, 'last_serial') | formatNumber
                }}</span>
            </p>

            <p class=" leading-8">
              <i class="el-icon-collection-tag"></i>
              较上月
              <span class="font-bold tip">{{
                  getObjValue(item, 'change_rate') || '---'
                }}</span>
            </p>
          </el-card>
        </div>
      </el-timeline-item>
    </el-timeline>

    <el-card v-enter-helper="initData" class="mt-8">
      <section slot="header">
        <el-radio-group
          v-model="dataForm.date_tag"
          class="mr-4"
          @change="handleChange"
        >
          <el-radio-button :label="1">今天</el-radio-button>
          <el-radio-button :label="2">本周</el-radio-button>
          <el-radio-button :label="3">本月</el-radio-button>
          <el-radio-button :label="0">自定义</el-radio-button>
        </el-radio-group>

        <el-date-picker
          v-show="dataForm.date_tag === 0"
          v-model="dateList"
          class="mr-4"
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          type="daterange"
        >
        </el-date-picker>

        <el-input
          v-model="dataForm.room_id"
          class="mr-4"
          clearable
          placeholder="请输入房间ID"
          style="width: 200px"
        ></el-input>

        <el-button type="primary" @click="deBounceWrap(handleSearch)"
        >搜索
        </el-button
        >
        <el-button type="primary" @click="deBounceWrap(handleReset)">
          重置
        </el-button>

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          class="mt-4"
          stripe
          @sort-change="handleSortByChange"
        >
          <el-table-column label="房间ID" prop="room_info.room_id"/>
          <el-table-column label="房间名称" prop="room_info.room_name"/>
          <el-table-column
            label="房间礼物流水（金币)"
            prop="room_gift_serial"
            sortable="custom"
          />
          <el-table-column
            label="盲盒流水（金币）"
            prop="blind_box_serial"
            sortable="custom"
          />
          <!-- <el-table-column
            label="陪玩流水（金币）"
            sortable="custom"
            prop="accompany_serial"
          /> -->
          <!--          <el-table-column-->
          <!--            label="许愿流星流水（金币）"-->
          <!--            prop="lucky_tree_serial"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            label="抢糖果流水（金币）"-->
          <!--            prop="scramble_sugar_serial"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <el-table-column
            label="霍克城堡流水（金币）"
            prop="huoke_serial"
            sortable="custom"
          />
          <!-- <el-table-column
            label="非房间洗练流水"
            prop="property_out_room_serial"
            sortable="custom"
          /> -->
          <el-table-column
            label="房间洗练流水"
            prop="property_in_room_serial"
            sortable="custom"
          />
          <!-- <el-table-column
            label="宠物总流水"
            prop="pet_serial"
            sortable="custom"
          /> -->
          <el-table-column label="总流水" prop="total"/>
        </el-table>

        <el-pagination
          :page-size="10"
          :total="meta.total"
          background
          class="mt-3 text-right"
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
        />
      </section>
    </el-card>
  </div>
</template>

<script>
import { statisticsRoomSerial, statisticsRoomSerialTotal } from '@/api/dataPanel/financial'

import { parseTime } from '@/utils'

const LABEL = {
  room_gift_serial: '房间礼物',
  blind_box_serial: '盲盒',
  // lucky_tree_serial: "许愿流星",
  // scramble_sugar_serial: "抢糖",
  huoke_serial: '霍克城堡',
  total: '总计流水',
  accompany_serial: '陪玩',
  property_in_room_serial: '房间洗练流水',
  property_out_room_serial: '非房间洗练流水',
  pet_serial: '宠物总流水'
}

export default {
  data() {
    return {
      loading: false,
      panelDataDay: [],
      panelDataWeek: [],
      panelDataMonth: [],

      // 时间选择器
      dateList: [],

      tableData: [],

      dataForm: {
        date_tag: '',
        start_date: '',
        end_date: '',
        room_id: ''
      },

      meta: {
        page: 1,
        page_size: 10,
        total: 0
      },

      orderBy: {
        order_by_room_gift: 0,
        order_by_blind_box: 0,
        order_by_lucky_tree: 0,
        order_by_scramble_sugar: 0,
        order_by_huoke: 0
      }
    }
  },
  filters: {
    formatNumber(value) {
      let tempValue = parseInt(value)
      return tempValue.toLocaleString()
    },
    getLabel(obj) {
      return LABEL[Object.keys(obj)[0]] || '未知标题'
    }
  },
  watch: {
    dateList(value) {
      if (value === null) {
        this.dataForm.start_date = undefined
        this.dataForm.end_date = undefined
      } else {
        let [start_time, end_time] = value
        if (start_time) {
          this.dataForm.start_date = parseTime(start_time, '{y}-{m}-{d}')
        }
        if (end_time) {
          this.dataForm.end_date = parseTime(end_time, '{y}-{m}-{d}')
        }
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        this.loading = true
        const [totalRes, tableData] = await Promise.all([
          statisticsRoomSerialTotal(),
          statisticsRoomSerial(this.dataForm, this.meta, this.orderBy)
        ])

        const {
          data: { day_data, month_data, week_data }
        } = totalRes
        this.panelDataDay = day_data
        this.panelDataWeek = week_data
        this.panelDataMonth = month_data

        const {
          data: { current_page, data, total }
        } = tableData
        this.meta.page = current_page
        this.meta.total = total
        this.tableData = data
        return Promise.resolve()
      } catch (e) {
        return Promise.reject()
      } finally {
        this.loading = false
      }
    },

    async handleChange(value) {
      if (value === 0) {
      } else {
        this.dateList = []
        await this.initData()
      }
    },
    handleSearch() {
      if (this.dataForm.date_tag === 0 && this.dateList.length === 0) {
        this.$message.warning('请选择时间')
        return
      }
      this.initData()
    },
    handleReset() {
      this.dataForm = {
        date_tag: '',
        start_date: '',
        end_date: '',
        room_id: ''
      }

      this.meta = {
        page: 1,
        page_size: 10,
        total: 0
      }

      this.orderBy = {
        order_by_room_gift: 0,
        order_by_blind_box: 0,
        order_by_lucky_tree: 0,
        order_by_scramble_sugar: 0,
        order_by_huoke: 0
      }

      this.initData()
    },

    getObjValue(obj, prop) {
      return Object.values(obj)[0][prop]
    },

    getStatus(statusString) {
      if (statusString.includes('增')) {
        return 'bg-status-green'
      } else if (statusString.includes('降')) {
        return 'bg-status-red'
      }
      return ''
    },

    getIconStatus(statusString) {
      return statusString.includes('增')
    },

    handleCurrentChange(page) {
      this.meta.page = page
      this.initData()
    },

    handleSortByChange({ column, prop, order }) {
      console.log(column, prop, order)
      let tempSortTag = 0
      if (order === 'ascending') tempSortTag = 1
      if (order === 'descending') tempSortTag = -1

      this.orderBy = {
        order_by_room_gift: 0,
        order_by_blind_box: 0,
        order_by_lucky_tree: 0,
        order_by_scramble_sugar: 0,
        order_by_huoke: 0
      }

      switch (prop) {
        case 'room_gift_serial':
          this.orderBy.order_by_room_gift = tempSortTag
          break
        case 'blind_box_serial':
          this.orderBy.order_by_blind_box = tempSortTag
          break
        // case 'lucky_tree_serial':
        //   this.orderBy.order_by_lucky_tree = tempSortTag
        //   break
        // case 'scramble_sugar_serial':
        //   this.orderBy.order_by_scramble_sugar = tempSortTag
        //   break
        case 'huoke_serial':
          this.orderBy.order_by_huoke = tempSortTag
      }

      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.bg-status-green {
  background-color : rgba(145, 212, 69, 0.3);
  color            : #5e5e5e;
  position         : relative;

  .tip {
    color : #16c116;
  }
}

.bg-status-red {
  background-color : rgba(212, 100, 69, 0.3);
  color            : #5e5e5e;
  position         : relative;

  .tip {
    color : #ce3207;
  }
}
</style>
